<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article</title>
    <link rel="stylesheet" href="../css/article.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/article.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>

    <script type="text/javascript" src="../js/jsdata.js"></script>

</head>
<body>

    <div id="head_background" >

        <div id="body_navigation_bar">
            <nav class="navbar navbar-default">
                <div id="container-fluid" class="container-fluid">

                    <ul class="nav navbar-nav">
                    <li><a style="color:black"  href="../index.html">主页</a></li>
                    <li><a style="color:black"  href="../html/article.html">文章</a></li>
                    <li><a style="color:black"  href="../html/img.html">图片</a></li>
                    <li><a style="color:black"  href="">归档</a></li>
                    </ul>

                </div>
            </nav>
        </div>
    </div>  

    <div id="body">

        <!-- <div id="write_blog">
            <span id="write_span" class="glyphicon glyphicon-pencil">

            </span>
            <a id="write_blog_label" href="/page/other?page=writeblog">写博客</a>
            <span id="write_blog_label" onclick="requestpage('writeblog')">写博客</span>
        </div>  -->

        <div id="body_article">
            <!--article left-->
            <!--内容进行分页显示 主页不分页 -->
            <!--onclick="jumpreadmd()"-->
            <div id="article_div">
                <div class="row" v-for="article in articles" id="article_row_div">
                    <div id="article_title_span" style="cursor: pointer">
                        <a  style="color: black;cursor: pointer" id="article_blogtitle" @click="jumpreadmd($event)">
                            {{ article.blogtitle }}
                        </a>
                    </div>
                    <div id="article_content_span">
                        <p>
                            {{ article.markdowninfo }}
                        </p>
                    </div>
                    <div id="article_time_span">
                        <span>
                            {{ article.writetime }}
                        </span>
                    </div>
                    <br>
                    <br>
                    <hr>
                </div>
            </div>
        </div>

        <nav aria-label="...">
            <ul class="pager">
                <li><a href="#">上一页</a></li>
                <li><a href="#">下一页</a></li>
            </ul>
        </nav>

    </div>

    <div style="width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: grey">
        Foreign Exchange App-001<a href="www.redwys.xyz"><b>redmaple</b></a>
    </div>
    <!-- <div id="footer">

    </div> -->


    <script>

        var nowpage = 1;
        var maxpage = 0;
        var article_vue = new Vue({
            el:'#article_div',
            data:{
                articles: [
                    {blogtitle:"",writetime:"",markdowninfo:"",markdownstring:""}
                ],
            },
            methods:{
                //
                jumpreadmd: function(event) {
                    var el = event.currentTarget;
                    /**
                     * 通过jsdata.js文件来存跳转需要的变量，
                     * 这种方式不成功
                     * @type {string}
                     */
                    blogtitle = el.innerText;
                    blogtitle = blogtitle.replace(/(^\s*)/g, "");   // 去除前面的空格
                    localStorage.setItem("blogtitle", blogtitle);
                    window.location.href = "read.html";
                }

            }

        });

        function requestpage(page) {
            var url = "http://localhost:8080/page/other"+"?page="+page;
            $.ajax({
                url:url,
                type:'GET',
                contentType:'application/json; charset=utf-8',
                success:function (data) {
                 //   console.log(data);
                    if(data == "NO_LOGIN") {
                        alert("NO_LOGIN");
                    }else if(data = "LOGIN_SUCCESS") {
                        alert("LOGIN_SUCCESS");
                        pagejump(page);
                    }
                }
            });
        }

    </script>

</body>



</html>